<template>
  <view class="bottom">
    <image
      class="imageStyle"
      src="@/static/images/bottomLine.png"
      mode="scaleToFill"
    >
    </image>
    <image
      class="imageButton"
      src="@/static/images/bottomButton.png"
      mode="aspectFit"
      @click="upload"
    >
    </image>
  </view>
</template>

<script>
import Vue from "vue";

export default Vue.extend({
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    async getImageInfo(imageTarget) {
      return new Promise((resolve) => {
        uni.getImageInfo({
          src: imageTarget,
          success: async (image) => {
            let imageWidth = image.width;
            let imageHeight = image.height;
            let threshold = 1500;
            if (imageWidth > threshold) {
              imageWidth = threshold;
              imageHeight = (image.height / image.width) * threshold;
            }
            if (imageHeight > threshold) {
              imageHeight = threshold;
              imageWidth = (image.width / image.height) * threshold;
            }
            let compressImage = await this.h5CompressImage(
              imageTarget,
              imageWidth,
              imageHeight
            );
            // console.log(compressFile(imageTarget));

            resolve({
              sourceImageWidth: imageWidth,
              sourceImageHeight: imageHeight,
              image: compressImage
              // originImage: imageTarget,
              // originWidth: image.width,
              // originHeight: image.height
            });
          }
        });
      });
    },
    async h5CompressImage(image, w, h) {
      return new Promise((resolve) => {
        // #ifdef H5
        let img = new Image();
        img.src = image;
        img.width = w;
        img.height = h;
        img.onload = () => {
          const canvas = document.createElement("canvas");
          canvas.width = img.width;
          canvas.height = img.height;
          const tempCtx = canvas.getContext("2d");
          tempCtx?.drawImage(img, 0, 0, img.width, img.height);
          // const ext = img.src
          //   .substring(img.src.lastIndexOf(".") + 1)
          //   .toLowerCase();
          const dataURL = canvas.toDataURL("image/jpeg", 1);
          // canvas = null;
          resolve(dataURL);
        };
        // #endif
        // #ifdef MP-WEIXIN
        uni.compressImage({
          src: image,
          compressedWidth: w,
          compressHeight: h,
          success: (path) => {
            // resolve(res.tempFilePath.replace("http://tmp/", ""));
            uni.getFileSystemManager().readFile({
              filePath: path.tempFilePath,
              encoding: "base64",
              success: (res) => {
                uni.getImageInfo({
                  src: path.tempFilePath,
                  success: (infoRes) => {
                    resolve(`data:image/jpeg;base64,${res.data}`);
                  },
                  fail: (err) => {
                    reject("Error getting image info");
                  }
                });
              }
            });
          }
        });
        // #endif
      });
    },
    upload() {
      uni.chooseImage({
        count: 1,
        success: async (response) => {
          let obj = await this.getImageInfo(response.tempFilePaths[0]);
          this.$emit("images", {
            image: obj.image,
            data: [],
            originImage: response.tempFilePaths[0],
            width: obj.sourceImageWidth,
            height: obj.sourceImageHeight
            // originImage: obj.originImage,
            // originWidth: obj.originWidth,
            // originHeight: obj.originHeight
          });
          // uni.getImageInfo({
          //   src: response.tempFilePaths[0],
          //   success: (res) => {
          //     console.log(res);
          //   }
          // });
          //   this.$emit("images", response.tempFiles[0].size);
        },
        fail: (error) => {}
      });
    }
  }
});
</script>

<style lang="scss" scoped>
.bottom {
  // height: 138rpx;
  position: relative;
  .imageStyle {
    width: 100%;
    height: 91rpx;
  }
  .imageButton {
    width: 98rpx;
    height: 98rpx;
    position: absolute;
    top: 0;
    right: 50%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%);
  }
}
</style>
